<template>
	<view>
		<view class="flex flex-direction align-stretch benben-flex-layout footprint_flex_1">
			<view class="flex flex-direction align-stretch" v-for="(item, i) in goodsList" :key="i">
				<view class="footprint_fd1_0_c0" @click="handleItemAllSelect(item)">
					<template v-if="isEditor">
						<image v-if="isItemAllSelect(item)" mode="aspectFit" src="/static/images/33.png"></image>
						<image v-else mode="aspectFit" src="/static/images/99.png"></image>
					</template>
					<view>{{ item.day }}</view>
				</view>
				<view class="flex flex-wrap align-center">
					<view @click="handleItem(val)" class="flex flex-direction align-stretch footprint_fd1_0_c1_c0"
						v-for="(val, j) in item.goods_list" :key="j">
						<template v-if="isEditor">
							<image v-if="val.isSelected" class="myCollection_fd2_0_c0_c0" mode="aspectFill"
								src="/static/images/33.png"></image>
							<image v-else class="myCollection_fd2_0_c0_c0" mode="aspectFill"
								src="/static/images/99.png"></image>
						</template>
						<image class="footprint_fd1_0_c1_c0_c0" mode="aspectFill" :src="val.thumb"></image>
						<view style="padding-left: 12rpx" class="footprint_fd1_0_c1_c0_c1_c0">{{ val.goods_name }}
						</view>
						<view style="padding-left: 12rpx" class="footprint_fd1_0_c1_c0_c1_c1_c1">
							<text class="footprint_price1_fd1_0_c1_c0_c1_c1_c0">￥</text>
							<text class="footprint_price1_fd1_0_c1_c0_c1_c1_c1">{{ val.shop_price | frontPrice }}</text>
							<text class="footprint_price2_fd1_0_c1_c0_c1_c1_c1">{{ val.shop_price | laterPrice }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!---flex布局flex布局结束-->
		<view class="flex flex-direction align-stretch benben-position-layout flex myCollection_flex_3" v-if="isEditor && goodsList.length > 0">
			<view class="flex align-center justify-between flex-sub myCollection_fd3_0">
				<view class="flex flex-wrap align-center">
					<view class="flex flex position-relative align-center" @click="isAllSelect = !isAllSelect">
						<image class="myCollection_checkfd3_0_c0_c0_c0_c0" v-if="isAllSelect" mode="aspectFit"
							src="/static/images/33.png"></image>
						<image class="myCollection_noCheckfd3_0_c0_c0_c1_c0" v-else mode="aspectFit"
							src="/static/images/99.png"></image>
						<text class="myCollection_fd3_0_c0_c1">全选</text>
					</view>
				</view>
				<button class="myCollection_fd3_0_c1" @tap.stop="getdeleteCollect()">删除</button>
			</view>
		</view>
		<view :style="{ height: '100rpx' }" v-if="isEditor && goodsList.length > 0"></view>
	</view>
</template>

<script>
	export default {
		name: 'benben-goods-footprint',
		props: {
			// 商品列表
			goodsList: {
				type: Array,
				default: () => [],
			},
			goodsId: {
				type: [String, Number],
				default: '',
			},
			value: {
				type: [String],
				default: '',
			},
			isEditor: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {}
		},
		computed: {
			isAllSelect: {
				get() {
					let flag = true
					this.goodsList.map((item) => {
						let _val = item.goods_list.find((val) => !val.isSelected)
						if (_val) {
							flag = false
						}
					})
					return flag
				},
				set(value) {
					this.goodsList.forEach((item) => {
						item.goods_list.forEach((val) => {
							this.$set(val, 'isSelected', value)
						})
					})
				},
			},
		},
		watch: {
		},
		methods: {
			isItemAllSelect(item) {
				let val = item.goods_list.find((val) => !val.isSelected)
				return val ? false : true
			},
			handleItemAllSelect(item) {
				if (!this.isEditor) return
				let flag = !this.isItemAllSelect(item)
				item.goods_list.forEach((val) => {
					this.$set(val, 'isSelected', flag)
				})
			},

			handleItem(item) {
				if (this.isEditor) {
					this.$set(item, 'isSelected', !item.isSelected)
				} else {
					this.$emit('update:goods-id', item.goods_id)
					this.$emit('handleGoods')
				}
			},
			//删除收藏
			getdeleteCollect() {
				let aids = []
				this.goodsList.map((item) => {
					item.goods_list.map((val) => {
						if (val.isSelected) {
							aids.push(val.id)
						}
					})
				})
				if (!aids.length) return this.$message.info('请选择商品')
				this.$emit('input', aids.join(','))
				this.$emit('handleDel')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.myCollection_fd3_0 {
		padding: 0rpx 24rpx 0rpx 32rpx;
	}

	.myCollection_checkfd3_0_c0_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.myCollection_noCheckfd3_0_c0_c0_c1_c0 {
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.myCollection_fd3_0_c0_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 0rpx 0rpx 14rpx;
	}

	.myCollection_fd3_0_c1 {
		background: #f6f6f6;
		background-size: 100% !important;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 24rpx;
		color: #333;
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-weight: 500;
	}

	.myCollection_flex_3 {
		background: #fff;
		background-size: 100% !important;
		width: 750rpx;
		height: 100rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		background-size: 100% auto !important;
	}

	.footprint_fd1_0_c0 {
		display: flex;
		align-items: center;
		padding-left: 16rpx;
		height: 50rpx;
		font-size: 24rpx;
		font-weight: 700;
		color: #666666;
		margin-bottom: 8rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
	}

	.footprint_fd1_0_c1_c0 {
		position: relative;
		width: 216rpx;
		margin: 0rpx 20rpx 24rpx 0rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.myCollection_fd2_0_c0_c0 {
		width: 32rpx;
		height: 32rpx;
		z-index: 10;
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		z-index: 99;
	}

	.footprint_fd1_0_c1_c0_c0 {
		width: 216rpx;
		height: 216rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.footprint_fd1_0_c1_c0_c1 {
		padding: 0rpx 12rpx 0rpx 12rpx;
	}

	.footprint_fd1_0_c1_c0_c1_c0 {
		width: 100%;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin: 20rpx 0rpx 14rpx 0rpx;
	}

	.footprint_fd1_0_c1_c0_c1_c1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #fa2033;
	}

	.footprint_fd1_0_c1_c0_c1_c1_c0 {
		font-size: 20rpx;
	}

	.footprint_fd1_0_c1_c0_c1_c1_c1 {
		color: #ff5536;
		font-weight: 600;
	}
	.footprint_price1_fd1_0_c1_c0_c1_c1_c0 {
		font-size: 20rpx;
	}

	.footprint_price1_fd1_0_c1_c0_c1_c1_c1 {
		font-size: 32rpx;
	}

	.footprint_price2_fd1_0_c1_c0_c1_c1_c1 {
		font-size: 22rpx;
	}

	.footprint_fd1_0_c1_c1 {
		margin: 0rpx 0rpx 28rpx 0rpx;
	}

	.footprint_fd1_0_c1_c1_c0 {
		width: 246rpx;
		height: 246rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.footprint_fd1_0_c1_c1_c1 {
		padding: 0rpx 12rpx 0rpx 12rpx;
	}

	.footprint_fd1_0_c1_c1_c1_c0 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin: 20rpx 0rpx 14rpx 0rpx;
	}

	.footprint_fd1_0_c1_c1_c1_c1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #fa2033;
	}

	.footprint_fd1_0_c1_c1_c1_c1_c0 {
		font-size: 20rpx;
	}

	.footprint_fd1_0_c1_c1_c1_c1_c1 {
		color: #ff5536;
		font-weight: 600;
	}

	.footprint_price1_fd1_0_c1_c1_c1_c1_c1 {
		font-size: 32rpx;
	}

	.footprint_price2_fd1_0_c1_c1_c1_c1_c1 {
		font-size: 22rpx;
	}

	.footprint_fd1_0_c1_c2 {
		margin: 0rpx 0rpx 28rpx 0rpx;
	}

	.footprint_fd1_0_c1_c2_c0 {
		width: 246rpx;
		height: 246rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.footprint_fd1_0_c1_c2_c1 {
		padding: 0rpx 12rpx 0rpx 12rpx;
	}

	.footprint_fd1_0_c1_c2_c1_c0 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin: 20rpx 0rpx 14rpx 0rpx;
	}

	.footprint_fd1_0_c1_c2_c1_c1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #fa2033;
	}

	.footprint_fd1_0_c1_c2_c1_c1_c0 {
		font-size: 20rpx;
	}

	.footprint_fd1_0_c1_c2_c1_c1_c1 {
		color: #ff5536;
		font-weight: 600;
	}

	.footprint_price1_fd1_0_c1_c2_c1_c1_c1 {
		font-size: 32rpx;
	}

	.footprint_price2_fd1_0_c1_c2_c1_c1_c1 {
		font-size: 22rpx;
	}

	.footprint_fd1_0_c1_c3 {
		margin: 0rpx 0rpx 28rpx 0rpx;
	}

	.footprint_fd1_0_c1_c3_c0 {
		width: 246rpx;
		height: 246rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.footprint_fd1_0_c1_c3_c1 {
		padding: 0rpx 12rpx 0rpx 12rpx;
	}

	.footprint_fd1_0_c1_c3_c1_c0 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin: 20rpx 0rpx 14rpx 0rpx;
	}

	.footprint_fd1_0_c1_c3_c1_c1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #fa2033;
	}

	.footprint_fd1_0_c1_c3_c1_c1_c0 {
		font-size: 20rpx;
	}

	.footprint_fd1_0_c1_c3_c1_c1_c1 {
		color: #ff5536;
		font-weight: 600;
	}

	.footprint_price1_fd1_0_c1_c3_c1_c1_c1 {
		font-size: 32rpx;
	}

	.footprint_price2_fd1_0_c1_c3_c1_c1_c1 {
		font-size: 22rpx;
	}

	.footprint_flex_1 {
		padding: 24rpx 0rpx 0rpx 0rpx;
	}

	.footprint_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.footprint_fd0_0_c0 {
		width: 180rpx;
	}

	.footprint_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.footprint_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.footprint_fd0_0_c2 {
		width: 180rpx;
	}

	.footprint_fd0_0_c2_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.footprint_flex_0 {
		background: #fff;
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto !important;
	}
</style>